マウス3

***　マウス３　***

ではでは次に行きましょう♪　(=^▽^=)
ここでは　マウスを重ねて『枠』を表示させてみます｡｡｡
枠の種類を変える事で、ボタンのような物も作れますヨｖ

*-*-*マウスを重ねて枠を表示*-*-*

ここで使う基本のタグはコレ↓

<a href="http://～" style="color:■;font-size:□;text-decoration:none;"
onMouseOver=style.border="△" onMouseOut=style.border="▲" target="_blank">
ここに文字
</a>

■	文字の色
□	文字の大きさ
△	マウスを重ねた時の枠の種類
▲	マウスを重ねた後の枠の種類（有無）

では　文字の色（■）を『#ff69b4』・文字の大きさ（□）を『15』
マウスを重ねた時の枠の種類（△）を『dotted』
重ねた後の枠の種類（▲）を『0』にして見てみましょう。
※マウスを重ねた時だけ　枠を表示させる時は、▲の設定を『0』にします。

　枠の種類はココを見てね♪　

こんな感じになります。

*-*-*マウスを重ねて枠を表示（背景色付き）*-*-*

次は　文字の背景に色を付けてみましょう｡｡｡

↓ここで使うタグはコレ

<a href="http://～" style="background-color:●;color:■;font-size:□;text-decoration:none;"
onMouseOver=style.border="△" onMouseOut=style.border="▲" target="_blank">
ここに文字
</a>

上記の基本タグに『background-color:●』を追加しました。
『●』に白（#FFFFFF）を入れて見てみると…

　枠の種類はココを見てね♪　

こんな感じになります♪　(^ー^* )

*-*-*マウスを重ねて枠を表示（背景画像付き）*-*-*

次は、背景に画像を持ってきたいと思います。
表示される部分が少ないので、なるべく小さな画像が良いですね★
大きくても切れてしまいますので…　(^_^;)

↓ここで使うタグはコレ

<a href="http://～" style="background:url(●);color:■;font-size:□;text-decoration:none;"
onMouseOver=style.border="△" onMouseOut=style.border="▲" target="_blank">
ここに文字
</a>

同じように、基本のタグに『background:url(●)』を入れました。
●の所に、背景にする画像を指定します。
画像の倉庫から『img src="http～***"』のみをコピー＆ペーストします。
ここで気を付ける事は、●以外は消さない事！
前後の（　）を消すと、読み込みが出来ませんｘｘｘｘ
それでは見てみましょう♪

　枠の種類はココを見てね♪　

元の画像→